<html>

<head>
    <meta charset='utf-8'>
    <script src='lib/esl.js'></script>
    <script src='lib/config.js'></script>
    <script src='lib/jquery.min.js'></script>
    <script src='http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM'></script>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
</head>

<body>
    <style>
        html,
        body,
        #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <div id='main'></div>
    <div id='l-map'></div>
    <script type="text/javascript">

    </script>

    <script>
        var busLines;
        var busLines2;
        var huan4Line = busLines2;
        var huan41Line = busLines2;
        var huan42Line = busLines2;
        var searchLine = busLines2;
        require([
            'echarts',
            // 'echarts/chart/lines',
            // 'echarts/component/legend',
            'extension/bmap'
        ], function (echarts) {


            // 百度地图API功能
            var map = new BMap.Map("l-map");
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
            var options = {
                onSearchComplete: function (results) {
                    if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                        // 获取第一条方案
                        var plan = results.getPlan(0);
                        // 获取方案的驾车线路
                        var route = plan.getRoute(0);
                        var route1 = plan.getRoute(1);

                        // 获取每个关键步骤,并输出到页面

                        var s = [];
                        var points = [];
                        for (var j = 0; j < plan.getNumRoutes(); j++) {
                            console.log(j);
                            var route = plan.getRoute(j);
                            // for (var i = 0; i < route.getNumSteps(); i++) {
                            //     var step = route.getStep(i);
                            //     s.push((i + 1) + ". " + step.getDescription());
                            // }

                            var arraysPoints = route.getPath();

                            for (var k = 0; k < arraysPoints.length; k++) {

                                var pt = [arraysPoints[k].lng, arraysPoints[k].lat];
                                points.push(pt);

                            }
                        }
                        // document.getElementById("r-result").innerHTML = s.join("<br/>");




                        var searchLineArray = getHuan4(points);
                        searchLine = [searchLineArray];
                        debugger;
                        myChart.setOption({
                            animation: false,
                            bmap: {
                                center: [116.36, 39.92],
                                zoom: 12,
                                roam: true,
                                mapStyle: {
                                    'styleJson': [
                                        {
                                            'featureType': 'water',
                                            'elementType': 'all',
                                            'stylers': {
                                                'color': '#031628'
                                            }
                                        },
                                        {
                                            'featureType': 'land',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#000102'
                                            }
                                        },
                                        {
                                            'featureType': 'highway',
                                            'elementType': 'all',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'arterial',
                                            'elementType': 'geometry.fill',
                                            'stylers': {
                                                'color': '#000000'
                                            }
                                        },
                                        {
                                            'featureType': 'arterial',
                                            'elementType': 'geometry.stroke',
                                            'stylers': {
                                                'color': '#0b3d51'
                                            }
                                        },
                                        {
                                            'featureType': 'local',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#000000'
                                            }
                                        },
                                        {
                                            'featureType': 'railway',
                                            'elementType': 'geometry.fill',
                                            'stylers': {
                                                'color': '#000000'
                                            }
                                        },
                                        {
                                            'featureType': 'railway',
                                            'elementType': 'geometry.stroke',
                                            'stylers': {
                                                'color': '#08304b'
                                            }
                                        },
                                        {
                                            'featureType': 'subway',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'lightness': -70
                                            }
                                        },
                                        {
                                            'featureType': 'building',
                                            'elementType': 'geometry.fill',
                                            'stylers': {
                                                'color': '#000000'
                                            }
                                        },
                                        {
                                            'featureType': 'all',
                                            'elementType': 'labels.text.fill',
                                            'stylers': {
                                                'color': '#857f7f'
                                            }
                                        },
                                        {
                                            'featureType': 'all',
                                            'elementType': 'labels.text.stroke',
                                            'stylers': {
                                                'color': '#000000'
                                            }
                                        },
                                        {
                                            'featureType': 'building',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#022338'
                                            }
                                        },
                                        {
                                            'featureType': 'green',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#062032'
                                            }
                                        },
                                        {
                                            'featureType': 'boundary',
                                            'elementType': 'all',
                                            'stylers': {
                                                'color': '#465b6c'
                                            }
                                        },
                                        {
                                            'featureType': 'manmade',
                                            'elementType': 'all',
                                            'stylers': {
                                                'color': '#022338'
                                            }
                                        },
                                        {
                                            'featureType': 'label',
                                            'elementType': 'all',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        }
                                    ]
                                }
                            },
                            series: [
                                //路
                                {
                                    type: 'lines',
                                    coordinateSystem: 'bmap',
                                    polyline: true,
                                    data: busLines,
                                    silent: true,
                                    lineStyle: {
                                        normal: {
                                            color: '#F6EC2C',
                                            // color: 'rgb(200, 35, 45)',
                                            opacity: 0.2,
                                            width: 0.1
                                        }
                                    },
                                    progressiveThreshold: 500,
                                    progressive: 200
                                },
                                // //动态轨迹
                                // {
                                //     type: 'lines',
                                //     coordinateSystem: 'bmap',
                                //     polyline: true,
                                //     data: busLines,
                                //     lineStyle: {
                                //         normal: {
                                //             width: 0,

                                //         }
                                //     },
                                //     effect: {
                                //         constantSpeed: 20,
                                //         show: true,
                                //         trailLength: 0.1,
                                //         symbolSize: 7
                                //     },

                                // },
                                // //动态轨迹2
                                // {
                                //     type: 'lines',
                                //     coordinateSystem: 'bmap',
                                //     polyline: true,
                                //     data: busLines2,
                                //     lineStyle: {
                                //         normal: {
                                //             width: 0.1,

                                //         }
                                //     },
                                //     effect: {
                                //         constantSpeed: 22,
                                //         show: true,
                                //         trailLength: 0.7,
                                //         symbolSize: 15
                                //     },
                                //     zlevel: 1
                                // },
                                // //换线1
                                // {
                                //     type: 'lines',
                                //     coordinateSystem: 'bmap',
                                //     polyline: true,
                                //     data: huan41Line,
                                //     lineStyle: {
                                //         normal: {
                                //             width: 0.1,

                                //         }
                                //     },
                                //     effect: {
                                //         constantSpeed: 60,
                                //         show: true,
                                //         trailLength: 0.7,
                                //         symbolSize: 15
                                //     },
                                //     zlevel: 1
                                // },
                                // //环线2
                                // {
                                //     type: 'lines',
                                //     coordinateSystem: 'bmap',
                                //     polyline: true,
                                //     data: huan42Line,
                                //     lineStyle: {
                                //         normal: {
                                //             width: 0.1,

                                //         }
                                //     },
                                //     effect: {
                                //         constantSpeed: 60,
                                //         show: true,
                                //         trailLength: 0.7,
                                //         symbolSize: 15
                                //     },
                                //     zlevel: 1
                                // },
                                //环线3
                                {
                                    type: 'lines',
                                    coordinateSystem: 'bmap',
                                    polyline: true,
                                    data: searchLine,
                                    lineStyle: {
                                        normal: {
                                            width: 0.1,

                                        }
                                    },
                                    effect: {
                                        constantSpeed: 60,
                                        show: true,
                                        trailLength: 0.7,
                                        symbolSize: 15
                                    },
                                    zlevel: 1
                                },
                            ]
                        });







                    }
                }
            };
            var driving = new BMap.DrivingRoute(map, options);
            var p2 = new BMap.Point(116.322399,40.16812);
            var p1 = new BMap.Point(116.402544,39.914714);
            var p3 = new BMap.Point(116.301934,40.045102);
            driving.search(p1, p2, { waypoints: [p3] });


            var huan4 = [
                [116.298197, 39.837414],
                [116.331398, 39.836527],
                [116.35267, 39.83686],
                [116.38156, 39.837635],
                [116.407862, 39.838633],
                [116.459892, 39.838411],
                [116.475127, 39.841846],
                [116.492087, 39.855916],
                [116.495824, 39.877071],
                [116.496399, 39.91416],
                [116.496399, 39.958308],
                [116.492662, 39.96583],
                [116.448968, 39.994137],
                [116.444513, 39.9948],
                [116.440776, 39.995187],
                [116.413899, 39.994855],
                [116.384901, 39.993847],
                [116.336249, 39.991884],
                [116.306497, 39.991332],
                [116.295286, 39.984587],
                [116.286519, 39.978865],
                [116.28271, 39.976681],
                [116.28156, 39.975216],
                [116.281273, 39.97458],
                [116.282207, 39.963134],
                [116.280689, 39.945169],
                [116.281408, 39.938641],
                [116.281695, 39.934713],
                [116.281695, 39.930564],
                [116.280689, 39.918003],
                [116.280401, 39.903392],
                [116.281695, 39.890328],
                [116.284282, 39.882023],
                [116.289744, 39.869398],
                [116.2896, 39.863196],
                [116.290462, 39.851454],
                [116.292906, 39.847465],
                [116.294487, 39.83982],
                [116.298197, 39.837414],
            ];
            var huan41 = [
                [116.444513, 39.9948],
                [116.440776, 39.995187],
                [116.413899, 39.994855],
                [116.384901, 39.993847],
                [116.336249, 39.991884],
                [116.306497, 39.991332],
                [116.295286, 39.984587],
                [116.286519, 39.978865],
                [116.28271, 39.976681],
                [116.28156, 39.975216],
                [116.281273, 39.97458],
                [116.282207, 39.963134],
                [116.280689, 39.945169],
                [116.281408, 39.938641],
                [116.281695, 39.934713],
                [116.281695, 39.930564],
                [116.280689, 39.918003],
                [116.280401, 39.903392],
                [116.281695, 39.890328],
                [116.284282, 39.882023],
                [116.289744, 39.869398],
                [116.2896, 39.863196],
                [116.290462, 39.851454],
                [116.292906, 39.847465],
                [116.294487, 39.83982],
                [116.298197, 39.837414],
                [116.331398, 39.836527],
                [116.35267, 39.83686],
                [116.38156, 39.837635],
                [116.407862, 39.838633],
                [116.459892, 39.838411],
                [116.475127, 39.841846],
                [116.492087, 39.855916],
                [116.495824, 39.877071],
                [116.496399, 39.91416],
                [116.496399, 39.958308],
                [116.492662, 39.96583],
                [116.448968, 39.994137],
            ];
            var huan42 = [

                [116.282207, 39.963134],
                [116.280689, 39.945169],
                [116.281408, 39.938641],
                [116.281695, 39.934713],
                [116.281695, 39.930564],
                [116.280689, 39.918003],
                [116.280401, 39.903392],
                [116.281695, 39.890328],
                [116.284282, 39.882023],
                [116.289744, 39.869398],
                [116.2896, 39.863196],
                [116.290462, 39.851454],
                [116.292906, 39.847465],
                [116.294487, 39.83982],
                [116.298197, 39.837414],
                [116.331398, 39.836527],
                [116.35267, 39.83686],
                [116.38156, 39.837635],
                [116.407862, 39.838633],
                [116.459892, 39.838411],
                [116.475127, 39.841846],
                [116.492087, 39.855916],
                [116.495824, 39.877071],
                [116.496399, 39.91416],
                [116.496399, 39.958308],
                [116.492662, 39.96583],
                [116.444513, 39.9948],
                [116.440776, 39.995187],
                [116.413899, 39.994855],
                [116.384901, 39.993847],
                [116.336249, 39.991884],
                [116.306497, 39.991332],
                [116.295286, 39.984587],
                [116.286519, 39.978865],
                [116.28271, 39.976681],
                [116.28156, 39.975216],
                [116.281273, 39.97458],
            ];
            var getHuan4 = function (huan4) {
                var points = [];
                for (var ii = 0; ii < huan4.length; ii++) {
                    points.push([huan4[ii][0], huan4[ii][1]])
                };
                return {
                    coords: points,
                    lineStyle: {
                        normal: {
                            //color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                            color: '#05FE0A'

                        }
                    }

                }
            };
            var myChart = echarts.init(document.getElementById('main'));

            $.get('data/lines-bus.json', function (data) {
                var hStep = 300 / (data.length - 1);
                busLines = data.map(function (busLine, idx) {

                    var prevPt;
                    var points = [];
                    for (var i = 0; i < busLine.length; i += 2) {
                        var pt = [busLine[i], busLine[i + 1]];
                        if (i > 0) {
                            pt = [
                                prevPt[0] + pt[0],
                                prevPt[1] + pt[1]
                            ];
                        }
                        prevPt = pt;

                        points.push([pt[0] / 1e4, pt[1] / 1e4]);
                    }
                    return {
                        coords: points,
                        lineStyle: {
                            normal: {
                                //color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                                color: '#F6EC2C'

                            }
                        }
                    };
                });
                busLines2 = data.map(function (busLine, idx) {
                    var prevPt;
                    var points = [];
                    for (var i = 0; i < busLine.length; i += 2) {
                        var pt = [busLine[i], busLine[i + 1]];
                        if (i > 0) {
                            pt = [
                                prevPt[0] + pt[0],
                                prevPt[1] + pt[1]
                            ];
                        }
                        prevPt = pt;

                        points.push([pt[0] / 1e4, pt[1] / 1e4]);
                    }
                    return {
                        coords: points,
                        lineStyle: {
                            normal: {
                                //color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                                color: '#E54C22',


                            }
                        }
                    };
                });


                console.log(busLines);
                busLines = busLines.slice(0, 200);
                busLines2 = busLines2.slice(200, 230);


                //换线1
                var huan4arry = getHuan4(huan4);
                huan41Line = [huan4arry];

                //环线2
                var huan41arry = getHuan4(huan41);
                huan4Line = [huan41arry];
                //换线3
                var huan42arry = getHuan4(huan42);
                huan42Line = [huan42arry];

                debugger;


            });
        });

    </script>
</body>

</html>